<!DOCTYPEHTML>
<html>
<head>
<meta charset="utf-8">
<title>立体盒子</title>
<style type="text/css">
.cube {
	position:fixed;
	left:30%;
	top:220px;
	opacity:0.8;
}
.cube p {
	line-height:24px;
	font-size:12px;
}
.cube .one {
	top:200px;
	left:50px;
	margin-left:-200px;
}
.rightFace, .leftFace, .topFace div {
	padding:10px;
	width:180px;
	height:180px;
}
.rightFace, .leftFace, .topFace {
	position:absolute;
}
/*.cube:hover .rightFace, .cube:hover .leftFace, .cube:hover .topFace div{
	background-color:#ffc;
}*/
/*.cube:hover .rightFace:hover, .cube:hover .leftFace:hover, .cube:hover .topFace:hover div{
	background-color:#ffa;
}*/
.leftFace {
	-webkit-transform:skew(0deg, 30deg);
	-moz-transform:skew(0deg, 30deg);
	background-color:#CCC;
}
.rightFace {
	-webkit-transform:skew(0deg, -30deg);
	-moz-transform:skew(0deg, -30deg);
	background-color:#ddd;
	left:200px;
}
.topFace div {
	-webkit-transform:skew(0deg, -30deg) scale(1, 1.16);
	-moz-transform:skew(0deg, -30deg) scale(1, 1.16);
	background-color:#eee;
	font-size:0.862em;
}
.topFace {
	-webkit-transform:rotate(60deg);
	-moz-transform:rotate(60deg);
	top:-158px;
	left:100px;
}
.cube {
	-webkit-transition: 1s;
}
.cube:hover {
	-webkit-transform: scale(1.5);
}
img{
	width:150px;}
</style>
</head>
<body>
<div class="cube one">
  <div class="topFace">
    <div>
      <h2>顶面</h2>
      <p><img src="images/pic1.jpg" /></p>
    </div>
  </div>
  <div class="leftFace">
    <h2>侧面</h2>
    <p><img src="images/pic2.jpg" /></p>
  </div>
  <div class="rightFace">
    <h2>正面</h2>
    <p><img src="images/pic3.jpg" /></p>
  </div>
</div>
</body>
</html>